<template>
	<view>
		<view class="redPacket-info-view">
			<view class="redPacket-info-bg1" @click="detail">
				<view class="redPacket-info1-item">
					<view class="redPacket-info1-title util-font-medium">可用红包(元)</view>
					<view class="redPacket-info1-text util-font-medium">{{parseInt(data.amount)/100.0}}</view>
				</view>
			</view>
			<view class="redPacket-info-bg2">
				<view class="redPacket-info2-item" @click="detail">
					<view class="redPacket-info2-item-title util-font-medium">当日红包</view>
					<view class="redPacket-info2-item-text util-font-medium">{{parseInt(data.todayAmount)/100.0}}</view>
				</view>
				<view class="redPacket-info2-item" style="margin-left: 100upx;" @click="detail">
					<view class="redPacket-info2-item-title util-font-medium">累计获取</view>
					<view class="redPacket-info2-item-text util-font-medium">{{parseInt(data.totalAmount)/100.0}}</view>
				</view>
			</view>
			<view class="redPacket-info1-tips util-font-medium" @click="rules">红包规则</view>
		</view>
		<view class="redPacket-list-view">
			<view class="redPacket-list-title util-font-medium">做任务赚红包</view>
		</view>
		<view class="redPacket-task-view">
			<view class="redPacket-task-content-view">
				<view class="redPacket-task-title">分享给好友</view>
				<view class="redPacket-task-reward">￥1/人</view>
			</view>
			<view class="redPacket-task-button" @click="shareToFriends">去完成</view>
		</view>
		<view class="redPacket-task-more-view">
			<view class="redPacket-task-more-title">更多红包任务持续发布中...</view>
		</view>
		<view class="redPacket-list-view">
			<view class="redPacket-list-title util-font-medium">红包排行榜</view>
		</view>
		<view class="redPacket-item" v-for="(item, index) in dataList" :key="index">
			<image class="item-headimg" :src="item.appUser.headimgurl" mode="aspectFill"></image>
			<view class="item-nickname util-font-regular">{{(item.appUser.nickname.length>2)?(item.appUser.nickname.slice(0,2) + '**'):item.appUser.nickname}}</view>
			<view class="item-price util-font-regular">累计节省：{{parseInt(item.totalAmount)/100.0}}元</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
				dataList: [],
			}
		},
		onLoad() {
			this.loadAmount()
			this.loadData()
		},
		onPullDownRefresh() {
			this.loadAmount()
			this.loadData()
		},
		methods: {
			loadAmount: function(){
				var that = this
				that.sendRequest({
					url: 'app/appRedPacket/statistics/' + uni.getStorageSync('userInfo').id,
					method: "POST",
					header: that.$urlRequest.getHeader('token', 'json'),
					success: function(res){
						that.data = res.data.data
					}
				})
			},
			loadData: function(){
				var that = this
				that.sendRequest({
					url: 'app/appRedPacket/page',
					method: 'POST',
					header: that.$urlRequest.getHeader('token', 'json'),
					success: function(res){
						that.dataList = res.data.records
					}
				})
			},
			detail: function(){
				uni.navigateTo({
					url: 'redPacketDetail'
				})
			},
			shareToFriends: function(){
				uni.navigateTo({
					url: '../../workbench/inviteFriendsRegist'
				})
			},
			rules: function(){
				uni.navigateTo({
					url: 'redPacketRule'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
	.redPacket-info-view {
		width: 690upx;
		height: 320upx;
		margin: 30upx;
		background: linear-gradient(to right, #eb8735, #ea5a2e);
		border-radius: 10upx;
		padding: 1upx;
	}
	.redPacket-info-bg1 {
		width: 630upx;
		height: 130upx;
		margin: 30upx 30upx 0;
		padding-bottom: 30upx;
		border-bottom: 2upx solid rgba(240,240,240,0.3);
	}
	.redPacket-info1-title {
		width: 100%;
		height: 55upx;
		line-height: 55upx;
		color: white;
		font-size: 28upx;
	}
	.redPacket-info1-text {
		width: 100%;
		height: 75upx;
		line-height: 75upx;
		color: white;
		font-size: 50upx;
		margin-top: 3upx;
	}
	.redPacket-info1-tips {
		height: 55upx;
		line-height: 55upx;
		color: white;
		font-size: 22upx;
		position: absolute;
		top: 45upx;
		right: 60upx;
	}
	
	.redPacket-info2-item {
		width: 100upx;
		height: 95upx;
		margin-top: 30upx;
		margin-left: 30upx;
		text-align: center;
		float: left;
	}
	.redPacket-info2-item-title {
		width: 100%;
		height: 35upx;
		line-height: 35upx;
		color: white;
		font-size: 24upx;
	}
	.redPacket-info2-item-text {
		width: 100%;
		height: 35upx;
		line-height: 35upx;
		color: white;
		font-size: 26upx;
		margin-top: 15upx;
	}
	.redPacket-task-view {
		width: 690rpx;
		height: 110rpx;
		margin: 0 30rpx 30rpx;
		border-bottom: 2rpx solid #f1f1f1;
	}
	.redPacket-task-more-view {
		width: 690rpx;
		height: 60rpx;
		margin: 0 30rpx;
	}
	.redPacket-task-more-title {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		color: #999999;
		font-size: 28rpx;
		text-align: center;
	}
	.redPacket-task-content-view {
		width: 500rpx;
		height: 110rpx;
		float: left;
	}
	.redPacket-task-title {
		color: #333333;
		font-size: 28rpx;
		height: 40rpx;
		line-height: 40rpx;
	}
	.redPacket-task-reward {
		color: #ea5a2e;
		font-size: 22rpx;
		height: 40rpx;
		line-height: 40rpx;
	}
	.redPacket-task-button {
		width: 160rpx;
		height: 60rpx;
		box-sizing: border-box;
		border: 4rpx solid #ea5a2e;
		color: #ea5a2e;
		background-color: white;
		border-radius: 30rpx;
		line-height: 52rpx;
		font-size: 32rpx;
		float: right;
		margin-top: 25rpx;
		text-align: center;
	}
	.redPacket-list-view {
		padding: 20upx 30upx 30upx;
		width: 690upx;
	}
	.redPacket-list-title {
		width: 100%;
		height: 40upx;
		line-height: 40upx;
		color: #333333;
		font-size: 34upx;
	}
	.redPacket-item {
		width: 690upx;
		height: 70upx;
		padding: 23upx 30upx;
	}
	.item-headimg {
		width: 70upx;
		height: 70upx;
		float: left;
		border-radius: 35upx;
		overflow: hidden;
	}
	.item-nickname {
		height: 70upx;
		line-height: 70upx;
		float: left;
		margin-left: 30upx;
		color: #333333;
		font-size: 34upx;
	}
	.item-price {
		height: 70upx;
		line-height: 70upx;
		float: right;
		color: #333333;
		font-size: 34upx;
	}
	
</style>
